<template>
  <view class="page-custom-order-detail" :class="{canceled: canceled}">
    <basic-nav-bar 
      backgroundColor="transparent"
      :statusBar="true"
      :border="false" 
      :fixed="true"
      left-icon="arrowleft" 
      title="定制详情" 
    />

    <template v-if="orderDetail.id">
      <view class="content">
        <!-- 订单状态 -->
        <view class="order-status active">{{canceled ? '已取消' : '已提交'}}</view>
        <!-- 步骤条 -->
        <steps :active="!canceled"/>

        <!-- 定制卡片 -->
        <view class="custom-info">
          <view
          class="card">
            <view class="card-mask"></view>
            <view class="card-title">
              <view class="icon-wrapper">
                <basic-icons name="icon102" :color="canceled ? '#909BB1' : '#00CBD6'" size="24rpx"></basic-icons>
              </view>
              <text>{{orderDetail.type===0? '个人': '公司'}}定制</text>
            </view>

            <view class="card-content">
              {{orderDetail.departure}}-{{orderDetail.destination}}-{{orderDetail.days}}天定制游
            </view>
          </view>

          <!-- 出发、返程时间 -->
          <view class="date-range">
            <view class="align-left">
              <view class="title">出发时间</view>
              <view class="date">{{orderDetail.startDate}}</view>
            </view>
            <view class="total">共{{orderDetail.days}}天</view>
            <view class="align-right">
              <view class="title">返程时间</view>
              <view class="date">{{orderDetail.returnDate}}</view>
            </view>
          </view>

          <!-- 城市，出游人信息 -->
          <view class="city-and-travelers">
            <view class="city">
              <text>{{orderDetail.departure}}</text>
              <img src="https://imgs.bestwehotel.com/images/inn/1bqrKXNQxy" style="width:40rpx;height:40rpx;margin-left:16rpx;margin-right:16rpx" />
              <text>{{orderDetail.destination}}</text>
            </view>

            <view class="travelers">{{travelers}}</view>
          </view>
        </view>

        <!-- 订单详情 -->
        <view class="order-info">
          <view class="title">详细信息</view>
          <labelValue label="人均预算" :value="'￥' + orderDetail.averageBudget"/>	
          <labelValue label="联系人" :value="orderDetail.contactName"/>	
          <labelValue label="联系电话" :value="orderDetail.contactMobile"/>	
          <labelValue label="提交时间" :value="orderDetail.createTime" />
        </view>

        <!-- 定制师 -->
        <view v-if="orderDetail.customizerMobile" class="server-info" @click="callPhone">
          <img class="avatar" src="https://imgs.bestwehotel.com/images/inn/1br4J9QQmr">

          <view class="server-info-content">
            <view class="server-name">{{orderDetail.customizerName}}</view>
            <view class="server-phone">联系电话：{{orderDetail.customizerMobile}}</view>
          </view>

          <view class="icon-wrapper">
            <text>拨打</text>
            <basic-icons name="icon-arrow-right" size="28rpx" />
          </view>
        </view>
      </view>
      <!-- 取消原因 -->
      <customCancel ref="customCancel" :orderId="orderDetail.id" @refreshOrder="refreshOrder" />

      <bottomBar v-if="!canceled">
        <view class="b-btn">
          <basic-button type="cancel" border width="200rpx" @click="cancel">取消订单</basic-button>    
        </view>
      </bottomBar>
    </template>
    
  </view>
</template>
<script>
import bottomBar from '@/components/business/bottom-bar'
import steps from './components/steps'
import labelValue from '../../components/label-value'
import customCancel from '../../components/custom-cancel'
import sdk from 'sdk'
import {getCustomOrderDetail} from 'api'

export default {
  name: 'page-custom-order-detail',

  components: {steps, labelValue, bottomBar, customCancel},

  data() {
    return {
      ORDER_STATUS_SUBMIT: 0, // 订单状态-已提交
      ORDER_STATUS_CANCELED: 1, // 订单状态-已取消

      orderDetail: {},
      code:''
    }
  },

  computed: {
    canceled() {
      return this.orderDetail && this.orderDetail.status === this.ORDER_STATUS_CANCELED
    },
    travelers() {
      switch(this.orderDetail.type) {
        case 0: 
					let travelers = []
					if (this.orderDetail.adultNum) {
						travelers.push(`成人 × ${this.orderDetail.adultNum}`) 
					}

					if (this.orderDetail.childrenNum) {
						travelers.push(`儿童 × ${this.orderDetail.childrenNum}`) 
					}

					return travelers.join('，')
				case 1: 
					return this.orderDetail.companyAdultNum 
					break
      }
    } 
  },

  onLoad(query) {
    sdk.selectCity({}) // 防止旧数据干扰

    let {code} = query
    this.code = code
    this.getData(code)
  },

  methods: {
    refreshOrder(){
      // 标记订单有变化，方便返回订单列表页刷新订单
      // sdk.selectCity({ needRefresh: 1 })

      this.getData(this.code)
    },
    getData(id) {
      getCustomOrderDetail({id}).then(res => {
        this.orderDetail = res.result
      })
    },
    callPhone() {
      sdk.callPhone({
        phoneNumber: this.orderDetail.customizerMobile
      })
    },
    cancel() {      
			this.$refs.customCancel.show()
    }
  }
}
</script>
<style lang="less">
.page-custom-order-detail {
  min-height: 100vh;
  background: #F6F9FD;

  &.canceled {
    .order-status {
      color: @font_light_color;
    }
    .custom-info .card {
      background: #909BB1;
    }
  }

  .block() {
    background-color: #ffffff;
    border-radius: 16rpx;
    margin: 20rpx 0;
    // box-shadow: 0 4rpx 60rpx 0 rgba(0, 0, 0, 0.04);
  }

  .order-status {
    color: @theme_color;
    font-size: 32rpx;
    margin-bottom: 16rpx;
    font-weight: 600;
  }

  .content {
    padding: 20rpx 20rpx @bottom_bar_height;
  }

  .custom-info {
    .block();
    padding: 20rpx 20rpx 0;

    .card {
      position: relative;
      height: 152rpx;
      border-radius: 16rpx;
      padding-left: 20rpx;
      padding-top: 34rpx;

      background: linear-gradient(90deg, #00CBD6 0%, #0ECEE5 100%);

      .card-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        right: 0;
        top: 0;

        background: url(https://imgs.bestwehotel.com/images/inn/1bqUeuqs5F);

        background-repeat: no-repeat;
        background-size: contain;
        background-position: right;
      }

      .card-title {
        .flex;
        .flex-middle;

        color: #ffffff;
        font-size: 24rpx;

        .icon-wrapper {
          .flex;
          .flex-center;
          .flex-middle;

          width: 28rpx;
          height: 28rpx;
          margin-right: 10rpx;
          border-radius: 100%;

          background: #ffffff;
        }
      }

      .card-content {
        margin-top: 10rpx;
        color: #ffffff;
        font-weight: 600;
      }
    }
    .date-range {
      .flex;
      .flex-middle;

      height: 122rpx;
      border-bottom: 1rpx solid #FAFAFA;

      .title {
        font-size: 20rpx;
        color: @font_light_color;
        line-height: 28rpx;
      }

      .date {
        font-size: 32rpx;
        font-weight: 600;
        color: #000000;
        line-height: 44rpx;
      }

      .align-left {
        text-align: left;
      }

      .align-right {
        text-align: right;
      }

      .total {
        width: 92rpx;
        height: 46rpx;
        line-height: 46rpx;

        border-radius: 30rpx;
        border: 1rpx solid #F3F3F3;

        font-size: 24rpx;
        color: @font_light_color;
        background: fade(#95A0B5, 5%);
        text-align: center;
        margin: 0 auto;
      }
    }

    .city-and-travelers {
      .flex;
      .flex-middle;
      .flex-between;

      height: 88rpx;

      .city {
        .flex;
        .flex-middle;

        font-weight: 600;
      }

      .travelers {
        font-size: 24rpx;
        color: @font_light_color;
      }
    }
  }

  .order-info {
    .block;

    padding: 32rpx;

    .title{
			font-size: 28rpx;
			font-weight: 600;
			margin-bottom: 12rpx;
		}
  }

  .server-info {
    .block;
    .flex;
    .flex-between;
    .flex-bottom;

    padding: 32rpx;

    .avatar {
      width: 84rpx; 
      height: 84rpx; 
    }

    .server-info-content {
      .flex-1;

      margin-left: 16rpx;
    }

    .server-name {
      font-weight: 600;
      margin-bottom: 10rpx;
    }

    .server-phone {
      color: @font_light_color;
      font-size: 24rpx;
    }

    .icon-wrapper {
      .flex;
      .flex-middle;

      height: 34rpx;
      line-height: 1;

      font-size: 24rpx;
    }
  }
  .b-btn{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 30rpx;
  }
}
</style>